<template>
	<view class="group_list">
		<view class="search_top">
			<view class="inp_box">
				<input class="uni-input" v-model="group_member_id" placeholder="请输入发起人id" />
			</view>
			<view class="search_btn" @click="search">
				<text>搜索</text>
				<image src="/static/search.png" ></image>
			</view>
		</view>
		<view class="group_details">
			<view class="gd_tit">
				<image src="/static/home/c_line.png" ></image>
				<text>可参与拼团数量：{{info.total_count}}</text>
			</view>
			<view class="list">
				<view class="l_box" v-for="item,i in list" :key="i">
					<view class="l_tit">
						还差{{item.remain_num}}人成功拼团
					</view>
					<view class="man_box">
							<view class="m_left">
								<view class="ml_msg ">
									<image class="border" :src="item.group_member_info.avatar" ></image>
									<text>{{item.group_member_info.nickname}}</text>
								</view>
								<view class="ml_msg"  @click="buyshow('Offered',item)">
									<image src="/static/home/p_add.png" ></image>
									<text>立即参团</text>
								</view>
							</view>
							<view class="btn"  @click="buyshow('Offered',item)">
								立即参团
							</view>
					</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/loading.gif"></image>
				<text v-if="isempty">没有更多了~</text>
			</view>
		</view>
		<uni-popup ref="popupMobile" :is-mask-click="true" :z-index="1">
			<view class="nobind">
				<view>您还未绑定手机号</view>
				<image src="/static/close.png" @click="closeBind" mode="widthFix" class="e_close"></image>
				<!-- #ifdef MP-WEIXIN -->
				<button class="l_w_login" open-type="getPhoneNumber" @getphonenumber="getUserProfile">一键绑定手机号</button>
				<!-- #endif -->
			</view>
		</uni-popup>
		<groupPopup v-if="popu" :type="groupType" :goodsid="goodsid" :parkId="parkId"  :userData="userData" @cler="clet" />
	</view>
</template>

<script>
	import groupPopup from './components/popup.vue';
	export default{
		components: {
			groupPopup
		},
		data(){
			return{
				popu:false,
				groupType:'',
				goodsid: '',
				parkId: '',
				info:{},
				list:[],
				group_member_id:'',
				isloading: false,
				isempty: false,
				page:0,
				userData:{}
				
			}
		},
		async onLoad(options) {
			if (options) {
				this.goodsid = options.goodsid
				this.parkId = options.parkId
			}
			this.getList()
		},
		onReachBottom() {
			this.getList();
		},
		methods:{
			// 绑定手机号
			getUserProfile(e) {
				let that = this;
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let obj = e.detail;
						obj.code1 = loginRes.code;
						that.$axios('bindmobile/bmobile', "POST", 'member', obj).then(res => {
							if (res.data.code == 200) {
								that.$refs.popupMobile.close();
							}
						})
					},
					fail() {
						that.$api.msg('绑定失败，请重试！')
					}
				})
				// #endif
			},
			closeBind() {
				this.$refs.popupMobile.close();
			},
			buyshow(type,item) {
				this.$axios('Info/member_info', "POST", 'member').then(res => {
					if (res.data.code = 200) {
						if (res.data.data.member.mobile == '') {
							this.$refs.popupMobile.open();
						} else {
							this.userData=item
							this.popu = !this.popu;
							this.groupType = type
						}
					}
				})
				
			},
			search(){
				this.page=0
				this.list=[]
				this.getList()
			},
			// 初始化数据
			getList() {
				var that = this;
				that.page++;
				that.isloading = true;
				that.isempty = false;
				uni.showLoading({
					title: '加载中'
				});
				that.$axios('Group/getGroupListByGoodsId', "POST", 'group_buy', {
					goodsid:this.goodsid,
					park_id:this.parkId,
					// goodsid: '8930312',
					// park_id: 6,
					group_member_id:that.group_member_id,
					page: that.page,
				}).then(res => {
					uni.hideLoading();
					this.isloading = false;
					if (res.data.code == 200) {
						that.info = res.data.data;
						that.list = [...that.list, ...that.info.list]
						that.isempty = that.info.list.length <that.info.page_size;
					}
				}, (error) => {
			
				})
			},
			clet(){
				this.popu = !this.popu;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background:#fdf8ff;
		padding-bottom: 160rpx;
	}
	.group_details{
		padding:20rpx 0;
		.list{
			.l_box{
				padding: 20rpx;
				width: 100%;
				height: 198rpx;
				border-radius: 24rpx;
				background-color: #fff;
				margin-top: 20rpx;
				.man_box{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-top: 20rpx;
					.btn{
						width: 186rpx;
						height: 72rpx;
						line-height: 72rpx;
						border-radius: 144rpx;
						background: #9A1FE8;
						color: #FFFFFF;
						font-size: 24rpx;
						text-align: center;
						font-weight: bold;
					}
					.m_left{
						display: flex;
						.ml_msg{
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							width: 80rpx;
							margin-right: 15rpx;
							image{
								width: 60rpx;
								height: 60rpx;
								box-sizing: border-box;
								// border-radius: 100%;
								// border: 4rpx solid rgba(0, 0, 0, 0.5);
							}
							.border{
								border: 4rpx solid #9A1FE8;
								border-radius: 100%;
							}
							text{
								width: 80rpx;
								height: 22rpx;
								color: #13001E;
								font-size: 18rpx;
								margin-top: 15rpx;
								text-align: center;
								 white-space: nowrap; 
								  
								  /* 3. 隐藏超出容器范围的文本（避免溢出显示） */
								  overflow: hidden; 
								  
								  /* 4. 对超出部分显示省略号（完成截断效果） */
								  text-overflow: ellipsis; 
							}
						}
					}
				}
				.l_tit{
					font-size: 28rpx;
					color: #9A1FE8;
					font-weight: bold;
				}
			}
		}
		.gd_tit{
			image{
				width: 4rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: bold;
				color: #13001E;
			}
		}
	}
	.group_list{
		padding: 20rpx;
	}
	.search_top{
		display: flex;
		justify-content: space-between;
		.search_btn{
			width: 160rpx;
			height: 64rpx;
			border-radius: 16rpx;
			background: #9A1FE8;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
			}
			image{
				width: 36rpx;
				height: 36rpx;
				margin-left: 8rpx;
			}
		}
		.inp_box{
			width: 534rpx;
			height: 64rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			border: 2rpx solid #CCCACD;
			padding: 0 10rpx;
			.uni-input{
				width: 534rpx;
				height: 64rpx;
			}
		}
	}
</style>